<template>
    <van-row>
        <div class="banner-list" v-for="(item,index) in activityData" :key="index" >
            <div class="banner-img" :style="{background:`url(${item.image})`}"></div>
            <div class="banner-msg">
                <span class="banner-title-1">
                    {{item.child_title}}
                </span>
                <span class="banner-title-2">
                    {{item.name}}
                </span>
                <span class="banner-title-3">
                    <span @click="Jumpto(item.id)">臻品鉴赏<img class="taggeicon" src="../assets/img/arrow-right.png" alt=""></span>
                </span>
            </div>
        </div>
    </van-row>
</template>
<script>
const uriArr=[
	"/pageleft",
	"/pageright",
	"/pagediff",
]
export default {
    props:["activityData"],
    data(){
        return{

        }
    },
    methods:{
        getradom(){
            const randomInt = (min, max) => Math.floor(Math.random() * (max - min) + min);
            let ints=randomInt(1,4)
            if(ints>0&&ints<4){
                console.log(ints)
                return ints-1
            }else{
                this.getradom()
            }
        },
        Jumpto(id){
            let path=uriArr[this.getradom()]
            console.log(path)
            this.$router.push({path:path,query: {id}})
        }
    }
}
</script>
<style scoped>
.banner-list{
    width: 360px;
    height: 204px;
    font-family: "PingFang SC","Microsoft YaHei";
    margin: 30px auto;
    color: #FFFFFF;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}
.banner-list::before{
    content: "";
    position: absolute;
    z-index: 1;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    -webkit-transform: scale(1,0);
    -ms-transform: scale(1,0);
    -o-transform: scale(1,0);
    transform: scale(1,0);
    top: 45px;
    right: 15px;
    bottom: 45px;
    left: 15px;
}
.banner-list::after{
    content:"";
    position: absolute;
    z-index: 1;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    -webkit-transform: scale(0,1);
    -ms-transform: scale(0,1);
    -o-transform: scale(0,1);
    transform: scale(0,1);
    top: 15px;
    right: 45px;
    bottom: 15px;
    left: 45px;
}
.banner-list:before,
.banner-list:after {
  content: "";
  position: absolute;
  opacity: 0;
  -webkit-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  z-index: 1;
}
.banner-list:hover:before, .banner-list:hover:after{
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.banner-list:hover .banner-img {
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.banner-list:hover .banner-img {
    -webkit-transform: scale(1.35);
    -ms-transform: scale(1.35);
    -o-transform: scale(1.35);
    transform: scale(1.35);
}
.banner-img{
    width: 360px;
    height: 204px;
    border-radius: 5px;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}
.banner-msg{
    width: 360px;
    height: 204px;
    position: absolute;
    top: 0;
}
.banner-title-1{
    display: block;
    text-align: center;
    padding-top: 49px;
    font-size: 16px;

}
.banner-title-2{
    display: block;
    width: 140px;
    height: 36px;
    border:2px solid #fff;
    margin: 18px auto 0 auto;
    font-size: 16px;
    text-align: center;
    line-height: 36px;
}
.banner-title-3{
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 44px;
    position: relative;
    z-index: 2;
}

.taggeicon{
    width: 4px;
    margin-left: 12px;
}
</style>